<template>
	<view>
		<view class="wrap">
		  <view class="coupon">
		    <view class="left"></view>
		    <view class="right"></view>
		  </view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
.wrap{
  // width:300px;
	width: 670rpx;
	margin:40rpx ;
	background-color: #f9f9f9;
	height: 500rpx;
}
.coupon{
  display:flex;
  overflow:hidden;
  border-radius:10px;
}
.left{
  // float:left;
  width:250px;
  height:85px;
  position:relative;
}
.left::before{
  content: '';
  position: absolute;
  top: -310px;
  display: block;
  right: -310px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 300px solid #fff;
  clip: rect(auto,auto,385px,auto);
}
.left::after{
  content: '';
  position: absolute;
  bottom: -310px;
  display: block;
  right: -310px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 300px solid #fff;
  clip: rect(285px,auto,auto,auto);
}
.right{
  // float:left;
  width:85px;
  height:85px;
  position:relative;
}
.right::before{
  content: '';
  position: absolute;
  top: -145px;
  display: block;
  left: -1450px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 135px solid #fff;
  clip: rect(0,auto,220px,145px);
}
.right::after{
  content: '';
  position: absolute;
  bottom: -145px;
  display: block;
  left: -145px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 135px solid #fff;
  clip: rect(60px,auto,auto,145px);
}
</style>
